<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<head>

<script type="text/javascript">
	function getJsM(f) {
		return f;
	}

	function loadJS(js, callback) {
		var id = getJsM(js);
		var scriptDom = document.getElementById(id);
		if (scriptDom) {
			callback();
		} else {
			var script = document.createElement("script");
			script.id = id;
			script.type = "text/javascript";
			if (callback) {
				script.onload = script.onreadystatechange = function() {
					if (script.readyState && script.readyState != 'loaded'
							&& script.readyState != 'complete') {
						return;
					}
					script.onreadystatechange = script.onload = null;
					callback();
				}
			}
			script.src = js;
			var head = document.getElementsByTagName("head").item(0);
			head.appendChild(script);
		}
	}
	loadJS('${pageContext.request.contextPath}/js/jquery-1.3.2.min.js',
			toolbarLoad);

	function toolbarLoad() {
		$(document)
				.ready(
						function() {
							//hide toolbar and make visible the 'show' button
							$("span.downarr a").click(function() {
								$("#toolbar").slideToggle("fast");
								$("#toolbarbut").fadeIn("slow");
							});

							//show toolbar and hide the 'show' button
							$("span.showbar a").click(function() {
								$("#toolbar").slideToggle("fast");
								$("#toolbarbut").fadeOut();
							});

							//show tooltip when the mouse is moved over a list element 
							$("ul#social li").hover(function() {
								$(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
								$(this).mouseleave(function() { //hide tooltip when the mouse moves off of the element
									$(this).find("div").hide();
								});
							});

							//don't jump to #id link anchor 
							$(
									".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a")
									.click(function() {
										return false;
									});

							//show quick menu on click 
							$("span.menu_title a").click(function() {
								if ($(".quickmenu").is(':hidden')) { //if quick menu isn't visible 
									$(".quickmenu").fadeIn("fast"); //show menu on click
								} else if ($(".quickmenu").is(':visible')) { //if quick menu is visible 
									$(".quickmenu").fadeOut("fast"); //hide menu on click
								}
							});

							//hide menu on casual click on the page
							$(document).click(function() {
								$(".quickmenu").fadeOut("fast");
								$(".quickmenu").css({
									'vivibility' : 'hidden'
								});
							});
							$('.quickmenu').click(function(event) {
								event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements 
							});
						})
	}
</script>
<style>
body,div,ul,ol,li,th,h1 {
	margin: 0;
	padding: 0;
}

ol,ul {
	list-style: none;
}

a {
	text-decoration: none;
}

a:focus {
	outline: 0;
}

/*-- Bottom Toolbar --*/
div#toolbar,div#toolbarbut {
	position: fixed; /* set fixed position for the bar */
	bottom: 0px;
	right: 0px;
	z-index: 9999; /* keep the bar on top  */
	height: 36px;
	background:
		url(${pageContext.request.contextPath}/tools/images/bcktool.png);
	/* CSS3 */
	-moz-border-radius-topleft: 8px;
	-khtml-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-topright: 8px;
	-khtml-border-radius-topright: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4;
	/* inset creates a inner-shadow */
	-khtml-box-shadow: 0px 1px 10px #666;
	-webkit-box-shadow: 0px 1px 10px #666;
	/* CSS3 end */
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
}

div#toolbar {
	width: 30%;
	min-width: 500px;
	/* to limit the width when an excessive window resize */
	/*margin: 0px auto;*/ /* centered toolbar */
	right: 0px;
}

div#toolbarbut { /* div for the 'hide status' */
	width: 60px;
	height: 15px;
	margin-right: 3%;
	display: none;
}

span.showbar a { /* show button */
	padding: 5px;
	font-size: 10px;
	color: #989898;
}

.leftside {
	float: left;
}

.rightside {
	float: right;
}

/*-- Left Side --*/
ul#social li {
	display: inline;
}

a.rss {
	display: inline-block;
	width: 104px;
	height: 35px;
	margin-left: 5px;
	background: url(${pageContext.request.contextPath}/tools/images/rss.png)
		no-repeat;
}

a.facebook,a.twitter,a.digg,a.delicious,a.stumble {
	display: inline-block;
	width: 40px;
	height: 35px;
	margin-top: 1px;
}

a.rss:hover,a.facebook:hover,a.twitter:hover,a.digg:hover,a.delicious:hover,a.stumble:hover
	{
	background-position: 1px 1px; /* simple css hover effect */
}

a.facebook {
	background:
		url(${pageContext.request.contextPath}/tools/images/facebook.png)
		no-repeat;
}

a.twitter {
	background:
		url(${pageContext.request.contextPath}/tools/images/twitter.png)
		no-repeat;
}

a.delicious {
	background:
		url(${pageContext.request.contextPath}/tools/images/delicious.png)
		no-repeat;
}

a.digg {
	background:
		url(${pageContext.request.contextPath}/tools/images/digg.png)
		no-repeat;
}

a.stumble {
	background:
		url(${pageContext.request.contextPath}/tools/images/stumble.png)
		no-repeat;
}

.tip {
	position: absolute; /* important */
	top: -75px;
	width: 250px;
	height: 78px;
	background: url(${pageContext.request.contextPath}/tools/images/tip.png)
		no-repeat;
	float: left;
	display: none;
}

/* custom distances for the icons */
#tipfacebook {
	left: 75px;
}

#tiptwitter {
	left: 120px;
}

#tipdelicious {
	left: 165px;
}

#tipdigg {
	left: 210px;
}

#tipstumble {
	left: 255px;
}

.tip ul {
	padding: 22px 0 0 25px;
}

.tip ul li {
	display: inline;
	padding-left: 3px;
}

.tip ul li a {
	font-size: 18px;
	color: #989898;
}

.tip ul li a:hover {
	color: #666;
}

.tip ul li small {
	font-size: 10px;
}

/*-- Right Side --*/
span.downarr { /* hide button */
	float: right;
	border-left: 1px solid #a4a4a4;
}

span.downarr a {
	display: block;
	width: 36px;
	height: 26px;
	padding: 25px 0 0 10px;
	background:
		url(${pageContext.request.contextPath}/tools/images/downarrow.png)
		no-repeat 5px 7px;
}

span.menu_title {
	background: #e4e4e4;
	border-left: 1px solid #a4a4a4;
	padding: 10px;
}

span.menu_title a {
	font-size: 16px;
	line-height: 34px;
	color: #9a9a9a;
}

.quickmenu {
	position: absolute; /* important */
	top: -251px;
	right: 46px;
	width: 260px;
	height: 250px;
	background: #e4e4e4;
	border-top: 1px solid #a4a4a4;
	border-left: 1px solid #a4a4a4;
	border-right: 1px solid #a4a4a4;
	/* CSS3 */
	-moz-box-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
	-khtml-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
	-webkit-box-shadow: 2px -3px 5px #c5c5c5, -3px 0px 5px #cdcdcd;
	/* CSS3 end */
	display: none; /* important */
}

.quickmenu ul {
	padding-top: 20px;
}

.quickmenu ul li {
	border-bottom: 1px solid #989898;
	padding: 5px 10px;
	margin: 0 15px 0 15px;
}

.quickmenu ul li a {
	font-size: 18px;
	color: #989898;
	display: block;
}

.quickmenu ul li a:hover {
	color: #666;
}
</style>
</head>

<body>

	<div id="toolbarbut">
		<!-- hide button -->
		<span class="showbar"><a href="#">show bar</a></span>
	</div>

	<div id="toolbar">
		<!-- toolbar container -->

		<div class="leftside">
			<!-- all things in floating left side -->
			<ul id="social">
				<li><a class="rss" href="#"></a> <!-- icon -->
					<div id="tiprss" class="tip">
						<!-- tooltip -->
						<ul>
							<li><a href="#">580 Readers</a></li>
							<li><a href="#"><small>[Subscribe]</small></a></li>
						</ul>
					</div></li>
				<li><a class="facebook" href="#"></a>
					<div id="tipfacebook" class="tip">
						<ul>
							<li><a href="#">Share Page</a></li>
							<li><a href="#">| Profile</a></li>
						</ul>
					</div></li>
				<li><a class="twitter" href="#"></a>
					<div id="tiptwitter" class="tip">
						<ul>
							<li><a href="#">ReTweet</a></li>
							<li><a href="#">| Profile</a></li>
						</ul>
					</div></li>
				<li><a class="delicious" href="#"></a>
					<div id="tipdelicious" class="tip">
						<ul>
							<li><a href="#">Bookmark</a></li>
							<li><a href="#">| Profile</a></li>
						</ul>
					</div></li>
				<li><a class="digg" href="#"></a>
					<div id="tipdigg" class="tip">
						<ul>
							<li><a href="#">Digg</a></li>
							<li><a href="#">| Profile</a></li>
						</ul>
					</div></li>
				<li><a class="stumble" href="#"></a>
					<div id="tipstumble" class="tip">
						<ul>
							<li><a href="#">Stumble</a></li>
							<li><a href="#">| Profile</a></li>
						</ul>
					</div></li>
			</ul>
		</div>
		<!-- .leftside -->
		<div class="rightside">
			<!-- all things in floating left side -->
			<span class="downarr"> <!-- hide button --> <a href="#"></a>
			</span> <span class="menu_title"> <a class="menutit" href="#">quick
					menu</a> <!-- quick menu title -->
			</span>
			<div class="quickmenu">
				<ul>
					<!-- quick menu list -->
					<li><a href="#">Premium Member</a></li>
					<li><a href="#">Become Author</a></li>
					<li><a href="#">Submit News</a></li>
					<li><a href="#">Send Feedback</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Privacy Policy</a></li>
				</ul>
			</div>
		</div>
		<!-- .rightside -->

	</div>
	<!-- #toolbarbut -->
</body>
</html>